<template>
  <view class="userBg h-44 relative flex flex-col">
    <view class="mt-5 text-center text-white text-lg">累计用户数</view>
    <view class="text-center text-white text-lg">{{ promoteUser.total }}</view>

    <view class="flex h-16 mt-auto">
      <view class="flex-1">
        <view class="text-center text-ls text-white">今日新增用户</view>
        <view class="text-center text-lg text-white">{{ promoteUser.today }}</view>
      </view>
      <view class="flex-1">
        <view class="text-center text-ls text-white">昨日新增用户</view>
        <view class="text-center text-lg text-white">{{ promoteUser.yesterday }}</view>
      </view>
    </view>
  </view>

  <view class="flex h-10">
    <view :class="tabSelect == 1 ? 'tabAct' : ''" class="flex-1 text-sm text-slate-600 h-full flex items-center justify-center" @click="changTab(1)">用户统计</view>
    <view :class="tabSelect == 2 ? 'tabAct' : ''" class="flex-1 text-sm text-slate-600 h-full flex items-center justify-center" @click="changTab(2)">用户明细</view>
  </view>

  <!--用户统计-->
  <List v-if="tabSelect == 1"
        ref="statsRef"
        :dataSource="userStatsList"
        :screenList="userStatList"
        :dropDownMenuList="userStatMenuList" @selectedTerm="selectedStatsTerm">
    <template v-slot:mainList="scope">
      <view class="px-4">
        <view class="border-bottom flex py-3">
          <view class="flex-1 text-sm text-slate-600">{{ scope.date }}</view>
          <view class="flex-1 flex items-center justify-center text-sm text-slate-600">{{ scope.n_count }}</view>
          <view class="flex-1 flex items-center justify-center text-sm text-slate-600">{{ scope.x_count }}</view>
          <view class="flex-1 flex items-center justify-center text-sm text-slate-600">{{ scope.r_count }}</view>
        </view>
      </view>
    </template>


  </List>

  <!--用户明细 :screenList="userDetailList"-->
  <List v-if="tabSelect == 2"
        :dataSource="mxDataList"
        :screenList="userDetailList"
        :dropDownMenuList="userDetailMenuList"
        @selectedTerm="selectedTerm"
        @scrollBottom="scrollBottom(2)" ref="mxRef">
    <template v-slot:before-sift>
      <view class="py-2">
        <view class="text-slate-600 text-sm">价格区间(元)</view>

        <view class="mt-2">
          <view class="flex items-center">
            <input type="text" v-model="priceRange.minPrice" placeholder="最低充值" class="px-2 w-32 h-8 border border-solid border-gray-300 text-sm">
            <view class="mx-2">至</view>
            <input type="text" v-model="priceRange.maxPrice" placeholder="最高充值" class="px-2 w-32 h-8 border border-solid border-gray-300 text-sm">
          </view>

          <view class="mt-2 flex">
            <view class="bg-indigo-500 flex items-center justify-center h-8 w-16 text-white text-sm rounded" @click="search">查询</view>
            <view class="bg-gray-400 ml-4 flex items-center justify-center h-8 w-16 text-white text-sm rounded" @click="reset">重置</view>
          </view>

        </view>

      </view>
    </template>

    <template v-slot:mainList="scope">
      <view class="px-4">
        <view class="flex justify-between py-3 border-bottom">
          <view class="flex items-center">
            <!--<view class="w-8 h-8 border border-solid rounded-full">-->
              <image class="w-8 h-8 rounded-full" :src="scope.avatar"></image>
            <!--</view>-->

            <view class="ml-2">
              <view class="text-slate-600 text-sm">{{ scope.nickname }}</view>
              <view class="text-slate-600 text-xs">{{ scope.uid }}</view>
            </view>

          </view>
          <view>
            <view class="text-red-600 text-sm text-right">￥{{ scope.recharge_amount }}</view>
            <view class="text-slate-600 text-xs text-right">{{ moment(scope.add_time * 1000).format('YYYY/MM/DD HH:mm:ss') }}</view>
          </view>
        </view>
      </view>
    </template>

    <template v-slot:after-sift>
      <view class="py-3" v-if="detailType == 4">
        <uni-datetime-picker type="daterange" v-model="customTime" :clear-icon="false" @change="customChange"></uni-datetime-picker>
      </view>
    </template>
  </List>

  <view v-if="tabSelect == 2" class="queryBtn text-white leading-10 text-center fixed bottom-10 left-1/2 w-48 h-10 bg-indigo-500 text-blue-600 rounded-3xl" @click="jumpUserSearch">
    用户查询
  </view>
</template>

<script setup lang="ts">
  import moment from 'moment'
  import { ref, reactive, onMounted } from 'vue'
  import { userStatisticsListApi, spreadCondPeopleApi, userStatisticsInfoApi } from '@/api/user/index'
  import List from './components/list.vue'
  import { uiwu } from "@/api/interface/interface";

  const pageQuery = ref<PageQuery>({
    page: 1,
    limit: 10
  })
  const total = ref<number>(0)

  /** tab切换 **/
  const tabSelect = ref(1)
  const changTab = (type: number) => {
    tabSelect.value = type
    userStatsList.value = []
    mxDataList.value = []
    pageQuery.value.page = 1
    total.value = 0

    type == 1 ? getUserStatisticsList() : getUserMxData()
  }

  onMounted(() => {
    getUserStatisticsList()
    getPromtion()
  })

  /** 获取推广用户统计 **/
  const promoteUser = ref({
    today: '',
    total: '',
    yesterday: ''
  })

  const getPromtion = async() => {
    const res = await userStatisticsInfoApi()
    promoteUser.value.today = res.data.today
    promoteUser.value.total = res.data.total
    promoteUser.value.yesterday = res.data.yesterday
  }

  /** 用户统计列表 **/
  const statsType = ref(10) // 10 本月, 20 按月
  const userStatsList = ref<object[]>([])
  const getUserStatisticsList = async() => {
      const res = await userStatisticsListApi( { ...{ page: 1, limit: 50, },...{ type: statsType.value } } )
      userStatsList.value =  res.data
  }

  /** 获取用户明细列表 **/
  const mxDataList = ref<object[]>([])
  const start = ref<string>('') // 开始时间
  const end = ref<string>('') // 结束时间
  const detailType = ref(0)
  const min_recharge = ref('') //最小充值
  const max_recharge = ref('') // 最大充值
  const getUserMxData = async() => {
    const res = await spreadCondPeopleApi({ ...pageQuery.value, ...{ date_type: detailType.value, start: start.value, end: end.value, min_recharge: min_recharge.value, max_recharge: max_recharge.value } })
    mxDataList.value = [...mxDataList.value , ...res.data.data]
    total.value = res.data.total
  }

  /** 用户统计 **/
  const userStatList = reactive([
    {
      name: '本月',
      key: 'date',
      className: 'flex-1 flex items-center justify-left text-slate-600 text-sm',
      type: 'select'
    },
    { name: '新增用户', className: 'flex-1 flex items-center justify-center text-slate-600 text-sm' },
    { name: '充值新用户', className: 'flex-1  flex items-center justify-center text-slate-600 text-sm' },
    { name: '充值用户数', className: 'flex-1  flex items-center justify-center text-slate-600 text-sm' },
  ])

  const userStatMenuList = reactive({
    date: [{ menuName: '本月', value: 10 }, { menuName: '往月', value: 20 }]
  })

  const statsRef = ref()
  const selectedStatsTerm = (screenTar) => {
    // console.log(screenTar)
    const index = userStatList.findIndex(item => {
      return item.key == screenTar.menuKey
    })
    statsType.value = screenTar.value
    userStatsList.value = []
    pageQuery.value.page = 1
    total.value = 0
    statsRef.value.closeDrop()
    getUserStatisticsList()
    userStatList[index].name = screenTar.menuName
  }


  /** 用户明细 **/
  const priceRange = ref({
    minPrice: '',
    maxPrice: ''
  })

  /** 充值区间搜索**/
  const search = () => {
    if(Number(priceRange.value.minPrice) > Number(priceRange.value.maxPrice) ) {
      uiwu.toast('输入有误,请重新输入')
      return;
    }
    mxDataList.value = []
    pageQuery.value.page = 1
    total.value = 0

    min_recharge.value = priceRange.value.minPrice
    max_recharge.value = priceRange.value.maxPrice

    mxRef.value.closeDrop()
    getUserMxData()
  }

  /** 充值区间重置 **/
  const reset = () => {
    priceRange.value.minPrice = ''
    priceRange.value.maxPrice = ''
    min_recharge.value = ''
    max_recharge.value = ''

    mxDataList.value = []
    pageQuery.value.page = 1
    mxRef.value.closeDrop()
    getUserMxData()
  }

  const userDetailList = reactive([
    // {
    //   name: '注册时间',
    //   key: 'signTime',
    //   className: 'flex-1 flex items-center justify-left text-slate-600 text-sm',
    //   type: 'select'
    // },
    {
      name: '全部',
      key: 'date',
      className: 'flex-1 flex items-center justify-left text-slate-600 text-sm',
      type: 'select'
    },
    {
      name: '充值区间',
      key: 'payment',
      className: 'flex-1 flex items-center justify-end text-slate-600 text-sm',
      type: 'select'
    }
  ])
  const userDetailMenuList = reactive({
    signTime: [{ menuName: '注册时间', value: 1 }, { menuName: '充值总额', value: 2 }, { menuName: '抓中娃娃', value: 3 }],
    date: [
      { menuName: '全部', value: 0 },
      { menuName: '今日', value: 1 },
      { menuName: '7日', value: 2 },
      { menuName: '30日', value: 3 },
      { menuName: '自定义日期', value: 4, slotName: 'after-sift' }
    ],
    payment: [{ slotName: 'before-sift', value: 77 }]
  })

  /** 自定义时间 **/
  const customTime = ref([])
  const customChange = () => {
    start.value = customTime.value[0]
    end.value = customTime.value[1]

    mxDataList.value = []
    pageQuery.value.page = 1
    total.value = 0

    mxRef.value.closeDrop()
    getUserMxData()
  }
  const mxRef = ref()

  const selectedTerm = (screenTar) => {
    if(screenTar.value == 77) return;

    const index = userDetailList.findIndex(item => {
      return item.key == screenTar.menuKey
    })

    if(screenTar.menuKey == 'date') {
      detailType.value = screenTar.value
    }
    mxDataList.value = []
    pageQuery.value.page = 1
    total.value = 0

    userDetailList[index].name = screenTar.menuName

    if(screenTar.value == 4 || screenTar.value == 77) {
      return
    }else {
      mxRef.value.closeDrop()
    }


    getUserMxData()

  }

  /** 滚动底部 **/
  const scrollBottom = (type) => {
    // type 1: 用户统计, 2: 用户明细
    if(type == 2) {
      if(mxDataList.value.length < total.value) {
        pageQuery.value.page += 1
        getUserMxData()
      }
    }

  }

  const jumpDetail = () => {
    uni.navigateTo({ url: '/pages/mine/detail' })
  }

  const jumpUserSearch = () => {
    uni.navigateTo({ url: '/pages/userSearch/index' })
  }

</script>

<style scoped lang="scss">
.userBg {
  background: url("@/static/image/userBg.png") no-repeat;
  background-size: cover;
  overflow: hidden;
}

.tabAct {
  //border-bottom: 4rpx solid #2563eb;
  color: #2563eb;
}

.queryBtn {
  transform: translateX(-50%);
  box-shadow: 0 0.08rem 0.186667rem 0 rgba(81, 108, 204, 0.57);
}

</style>
